Components

Global Header

The global header is the anchor for the Salesforce platform and spans all other parts of the UI. The functionality in the header is applicable across all contexts in the Salesforce ecosystem (internal or 3rd party).

BaseBasedev ready

Preview

Code

<header class="slds-global-header_container"><a href="javascript:void(0);" class="slds-assistive-text slds-assistive-text--focus">Skip to Navigation</a><a href="javascript:void(0);" class="slds-assistive-text slds-assistive-text--focus">Skip to Main Content</a>
  <div class="slds-global-header slds-grid slds-grid--align-spread">
    <div class="slds-global-header__item">
      <div class="slds-global-header__logo">
        <img src="/assets/images/logo-noname.svg" alt="" />
      </div>
    </div>
    <div class="slds-global-header__item slds-global-header__item--search">
      <div class="slds-form-element slds-lookup">
        <label class="slds-assistive-text" for="global-search-01">Search Salesforce</label>
        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--left">
          <svg aria-hidden="true" class="slds-input__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
          </svg>
          <input id="global-search-01" class="slds-input slds-lookup__search-input" type="search" placeholder="Search Salesforce" />
        </div>
      </div>
    </div>
    <ul class="slds-global-header__item slds-grid slds-grid--vertical-align-center">
      <li class="slds-dropdown-trigger slds-dropdown-trigger--click slds-m-left--x-small">
        <button class="slds-button" title="person name" aria-haspopup="true">
          <span class="slds-avatar slds-avatar--circle slds-avatar--medium">
            <img src="/assets/images/avatar2.jpg" alt="person name" />
          </span>
        </button>
      </li>
    </ul>
  </div>
</header>

SearchSearch › ActiveSearch › TypeaheadSearchdev ready

Preview

Code

<header class="slds-global-header_container"><a href="javascript:void(0);" class="slds-assistive-text slds-assistive-text--focus">Skip to Navigation</a><a href="javascript:void(0);" class="slds-assistive-text slds-assistive-text--focus">Skip to Main Content</a>
  <div class="slds-global-header slds-grid slds-grid--align-spread">
    <div class="slds-global-header__item">
      <div class="slds-global-header__logo">
        <img src="/assets/images/logo-noname.svg" alt="" />
      </div>
    </div>
    <div class="slds-global-header__item slds-global-header__item--search">
      <div class="slds-form-element slds-lookup slds-is-open">
        <label class="slds-assistive-text" for="global-search-01">Search Salesforce</label>
        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--left">
          <svg aria-hidden="true" class="slds-input__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
          </svg>
          <input id="global-search-01" class="slds-input slds-lookup__search-input" type="search" placeholder="Search Salesforce" aria-owns="global-search-list-01" role="combobox" aria-activedescendent="" aria-expanded="true" aria-autocomplete="list"
          />
        </div>
        <div class="slds-lookup__menu" id="global-search-list-01">
          <div class="slds-lookup__item--label slds-text-body--small">Recent Items</div>
          <ul class="slds-lookup__list" role="listbox">
            <li role="presentation">
              <span class="slds-lookup__item-action slds-media slds-media--center" id="option-01" role="option">
                <svg aria-hidden="true" class="slds-icon slds-icon-standard-opportunity slds-icon--small slds-media__figure">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>
                </svg>
                <div class="slds-media__body">
                  <div class="slds-lookup__result-text">Salesforce - 1,000 Licenses</div>
                  <span class="slds-lookup__result-meta slds-text-body--small">Opportunity • Prospecting</span>
                </div>
              </span>
            </li>
            <li role="presentation">
              <span class="slds-lookup__item-action slds-media slds-media--center" id="option-02" role="option">
                <svg aria-hidden="true" class="slds-icon slds-icon-standard-contact slds-icon--small slds-media__figure">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#contact"></use>
                </svg>
                <div class="slds-media__body">
                  <div class="slds-lookup__result-text">Art Vandelay</div>
                  <span class="slds-lookup__result-meta slds-text-body--small">Contact • avandelay@vandelay.com</span>
                </div>
              </span>
            </li>
            <li role="presentation">
              <span class="slds-lookup__item-action slds-media slds-media--center" id="option-03" role="option">
                <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                </svg>
                <div class="slds-media__body">
                  <div class="slds-lookup__result-text">Vandelary Industries</div>
                  <span class="slds-lookup__result-meta slds-text-body--small">Account • San Francisco</span>
                </div>
              </span>
            </li>
            <li role="presentation">
              <span class="slds-lookup__item-action slds-media slds-media--center" id="option-04" role="option">
                <svg aria-hidden="true" class="slds-icon slds-icon-custom-8 slds-icon--small slds-media__figure">
                  <use xlink:href="/assets/icons/custom-sprite/svg/symbols.svg#custom8"></use>
                </svg>
                <div class="slds-media__body">
                  <div class="slds-lookup__result-text">Salesforce UK 2016 Events</div>
                  <span class="slds-lookup__result-meta slds-text-body--small">General Ledger • $20,000</span>
                </div>
              </span>
            </li>
            <li role="presentation">
              <span class="slds-lookup__item-action slds-media slds-media--center" id="option-05" role="option">
                <svg aria-hidden="true" class="slds-icon slds-icon-standard-lead slds-icon--small slds-media__figure">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#lead"></use>
                </svg>
                <div class="slds-media__body">
                  <div class="slds-lookup__result-text">H.E. Pennypacker</div>
                  <span class="slds-lookup__result-meta slds-text-body--small">Lead • Nursing</span>
                </div>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <ul class="slds-global-header__item slds-grid slds-grid--vertical-align-center">
      <li class="slds-dropdown-trigger slds-dropdown-trigger--click slds-m-left--x-small">
        <button class="slds-button" title="person name" aria-haspopup="true">
          <span class="slds-avatar slds-avatar--circle slds-avatar--medium">
            <img src="/assets/images/avatar2.jpg" alt="person name" />
          </span>
        </button>
      </li>
    </ul>
  </div>
</header>

Component Overview

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create different tabset looks.
Class NameUsage
.slds-global-header_container
Applied to:

<div>

Outcome:

Container that fixes the global header to the top of the viewport, contains global header element

Required:

Required

Comments:

--

.slds-global-header
Applied to:

<div>

Outcome:

White bar that contains the regions of the global header

Required:

Required

Comments:

--

.slds-global-header__item
Applied to:

<div>

Outcome:

A region within the global header

Required:

Required

Comments:

--

.slds-global-header__item--search
Applied to:

.slds-global-header__item

Outcome:

Region that contains the search input, handles sizing

Required:

Required

Comments:

--

.slds-global-header__logo
Applied to:

<div>

Outcome:

Container of the global header logo

Required:

Required

Comments:

--